
import React, { useEffect } from 'react'
import { message } from 'antd'
import './login.less'
import { Button, Checkbox, Form, Input } from 'antd';
import loginimg from '../img/login.png'
import { Link, history } from 'umi'
import { authLogin } from '@/api/auth'

interface LoginType {
  name: string,
  password: string
}

// type Props = {}

function index() {

  useEffect(() => {
    window.localStorage.removeItem('token')
    window.localStorage.removeItem('user')
  }, [])

  const onFinish = (values: LoginType) => {
    // const onFinish = (values: any) => {
    //   console.log('Success:', values);
    // };

    // const onFinishFailed = (errorInfo: any) => {
    //   console.log('Failed:', errorInfo);
    // };


    authLogin('/api/auth/login', values).then((res:any) => {
      console.log(res);

      if (res.statusCode === 200) {
        console.log(333);

        window.localStorage.setItem('user', JSON.stringify(res.data))
        window.localStorage.setItem('token', res.data.token)
        window.sessionStorage.setItem('user', JSON.stringify(res.data))
        window.sessionStorage.setItem('token', res.data.token)
        //登录提示
        message.info('登录成功')
        //登录跳转
        history.push('/')
      }
    }).catch(err => {
      console.log(err);

      message.error('用户名或密码错误')
      return err
    })
  }
  return (
    <div className='index'>
      <div className='index-menu'>
        <div><img src={loginimg} alt="" /></div>
        <div>
          <h2>系统登录</h2>
          <Form
            name="basic"
            labelCol={{ span: 8 }}
            wrapperCol={{ span: 16 }}
            initialValues={{ remember: true }}
            onFinish={onFinish}
            // onFinishFailed={onFinishFailed}
            autoComplete="off"
          >
            <Form.Item
              label="账户"
              name="name"
              rules={[{ required: true, message: '请输入你的用户名' }]}
            >
              <Input placeholder='请输入用户名' />
            </Form.Item>

            <Form.Item
              label="密码"
              name="password"
              rules={[{ required: true, message: '请输入你的密码' }]}
            >
              <Input.Password placeholder='请输入你的密码' />
            </Form.Item>

            <Form.Item>
              <Button type='primary' htmlType='submit'>登录</Button>
            </Form.Item>

          </Form>
          <p>Or <Link to="/reg">注册用户</Link></p>
        </div>
      </div>
    </div>
  )
}
111
export default index
